<template>
  <div class="tree-node-box" :class="{'tree-node-active': data.isActived, 'word-direction': data.type === 'deviceType'}">
    <template v-if="data.children && data.children.length">
      <i class="ports right-ports" v-if="data.isActived" @click="handleCollapse"></i>
      <i class="ports add-ports" v-else @click="handleExpand">+</i>
    </template>
    <div class="tree-node-content">
      <div class="content-name" :title="data.label">{{data.label}}</div>
      <div class="content-num" v-if="data.type === 'keyComponents' && data.isActived && data.children.length > 0">{{data.children.length}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  inject: ["getGraph", "getNode"],
  data() {
		return {
      data: {}
		}
	},
  mounted() {
    this.data = this.getNode().data
  },
  methods: {
    handleExpand() {
      this.$emit('expandChildren', 'expand', this.getNode())
    },
    handleCollapse() {
      this.$emit('expandChildren', 'collapse', this.getNode())
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-node-box {
  font-size: 18px;
  background-color: #ffffff;
	border-radius: 10px;
	border: solid 2px #004892;
  color: #585757;
  height: 100%;
  position: relative;
  &.tree-node-active {
    color: #000000;
    background-color: #d6eaff;
  }
  .ports {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: solid 2px #004892;
  }
  .right-ports {
    background-color: #ffffff;
  }
  .add-ports {
    background-color: #004892;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tree-node-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    .content-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .content-num {
      width: 22px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      background-color: #004892;
      border-radius: 50%;
      font-size: 18px;
	    color: #ffffff;
    }
  }
  &.word-direction {
    .tree-node-content {
      justify-content: center;
      height: 100%;
      line-height: normal;
      writing-mode: vertical-rl;
      padding: 0 6px;
    }
  }
}
</style>